<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@ include file="/WEB-INF/tiles2/common.jsp" %>
<% request.setCharacterEncoding("UTF-8"); %>
<div class="aboutus" id="aboutus3" >
	<h3>회원 정보수정</h3>
	<div>
		<form id="myinfofrm" class="well form-horizontal">
			<fieldset>
				<div class="control-group info">
					<label class="control-label" for="name">이름</label>
					<div class="controls">
						<input type="text" name="name" id="name"
						class="span2"
						value=""></div> 
				</div><!-- 이름 -->
				<div class="control-group info">
					<label class="control-label" for="uid">아이디</label>
					<div class="controls">
						<input type="text" name="uid" id="uid"
						class="span3"  readonly="readonly" >
						</div> 
				</div><!-- 아이디 -->
				<div class="control-group info">
					<label class="control-label" for="pwd">비밀번호</label>
					<div class="controls">
						<input type="password" name="pwd" id="pwd"
						class="span3"  maxlength="16">
						<span id="msg1">6~16 자의 영문 소문자, 숫자와 특수기호(_)만 사용가능</span></div> 
				</div><!-- 비밀번호 -->
				<div class="control-group info">
					<label class="control-label" for="repwd">비밀번호 확인</label>
					<div class="controls">
						<input type="password" name="repwd" id="repwd"
						class="span3"  maxlength="16">
						<span id="msg2">이전 항목에서 입력했던 비밀번호를 한번 더 입력하세요.</span></div> 
				</div><!-- 비밀번호 확인 -->
				
				<div class="control-group info">
					<label class="control-label" for="zip1">우편번호</label>
					<div class="controls">
						<input type="text" name="zip1" id="zip1"
						class="span1"  maxlength="3" readonly="readonly"> -
						<input type="text" name="zip2" id="zip2"
						class="span1"  maxlength="3" readonly="readonly">
						<a class="btn btn-inverse"  id="zipbtn">
							<i class="icon-question-sign icon-white">
							</i>&nbsp;우편번호 찾기</a>
					</div>	 
				</div><!-- 우편번호 -->
				<div class="control-group info">
					<label class="control-label" for="addr">주소</label>
					<div class="controls">
						<input type="text" name="addr" id="addr"
						class="span3" >
						<input type="text" name="etcaddr" id="etcaddr"
						class="span3" >
						</div> 
				</div><!-- 주소 및 나머지 주소 -->
				
				<div class="control-group info">
					<label class="control-label" for="email1">전자우편 주소</label>
					<div class="controls">
						<div class="input-prepend input-append">
							<input type="text" id="email1" name="email1" class="span2">
							<span class="add-on">@</span>
							<input type="text" id="email2" name="email2" class="span2" readonly="readonly">
						</div>
						<select id="email3" class="span2">
							<option>선택하세요</option>
							<option value="manual">직접입력</option>
							<option>google.co.kr</option>
							<option>hotmail.com</option>
							<option>outlook.com</option>
							<option>daum.net</option>
						</select>
						</div> 
				</div><!-- 전자우편 주소 -->
				<div class="control-group info">
					<label class="control-label" for="mp1">개인연락처</label>
					<div class="controls">
						<select name="mp1" id="mp1" class="input-small">
							<option>국번</option>
							<option>010</option>
							<option>011</option>
							<option>018</option>
						</select>
						&mdash;<input type="text" name="mp2" id="mp2" class="span1" />
						&mdash;<input type="text" name="mp3" id="mp3" class="span1" />
					</div>
				</div><!-- 개인연락처 -->
				<div class="control-group info">
					<label class="control-label" for="captcha">자동가입방지</label>
					<div class="controls">
					<img src="<c:url value='/admin/captcha.mvc' />" class="captcha"> <br/>
					<input type="text" id="captcha" name="captcha" class="span2" />
					<a class="btn btn-inverse" id="capbtn">
					<i class="icon-question-sign icon-white"></i>
					&nbsp;captcha 확인받기</a>
					</div>
				</div><!-- 자동가입방지 -->
			</fieldset>
			<div class="tcenter">
				<a class="btn btn-primary" id="savebtn">
					<i class="icon-ok icon-white"></i>&nbsp;입력완료
				</a>
				<a class="btn btn-danger" id="cancelbtn">
					<i class="icon-remove icon-white"></i>&nbsp;취소하기
				</a>
			</div>
			<input type="hidden" id="zipcode" name = "zipcode">
			<input type="hidden" id="email" name="email">
			<input type="hidden" id="mp" name="mp">
			<input type="hidden" id="chkcaptcha" name="chkcaptcha" value="n" />
		</form>
	</div><!-- 회원가입 -->
	<input type="hidden" id="pwdcheck" value="n">
</div>
<!-- 우편번호 찾기 모달창 시작 -->
<div class="modal hide fade" id="zipcodemodal" role="dialog">
		<div class="modal-header">
			<h3>우편번호 찾기<button type="button" class="close" data-dismiss="modal"><b>X</b></button></h3>
		</div>	
		<div class="modal-body">
			<form class="form-horizontal" name="zipfrm">
				<div class="control-group error">
				<label class="control-label" for="dong">검색할 주소의 <br>동이름을 입력하세요</label>
				<div class="controls dragdown">
					<input type="text" name="dong" id="dong" class="span3">
					<a class="btn btn-inverse" id="findbtn">검색하기</a>
				</div>
				</div>
				<div class="tcenter">지역의 읍/면/동 이름을 공백없이 입력하신 후, [검색]버튼을 클릭하세요</div>
				<div class="tcenter topmargin" >
					<select size="10" class="span5" id="ziplist"></select>
				</div>
			</form>
		</div>	
		<div class="modal-footer">
			<a class="btn btn-danger" id="sendbtn">선택하고 닫기</a>
		</div>	
</div>

<!-- 우편번호 찾기 모달창 끝 -->
<script>
	$("#email3").on("change", function(event){
		if($("#email3").val()!="manual"){
			$("#email2").val($("#email3").val()).attr("readonly","readonly");
		}else{
			$("#email2").removeAttr("readonly").val("").focus();
		}
	});
	
	
	$("#savebtn").on("click",function(event){
			if($("#pwd").val()=="")alert();
			else if($("#pwdcheck").val()=="n")
				alert("비밀번호가 일치하지 않습니다.");
			else if($("#chkcaptcha").val() == "n")
				alert("자동가입방지문자를 확인하세요!!");
			else{
				 $("#email").val($("#email1").val()+"@"+$("#email2").val());
				 $("#mp").val($("#mp1").val()+$("#mp2").val()+$("#mp3").val());
				 $("#zipcode").val($("#zip1").val()+"-"+$("#zip2").val());
				 $("#myinfofrm").attr("method","post");
				 $("#myinfofrm").submit();
			 }
			
/* attr("action","<c:url value='/join/joinok.mvc3'/>") .submit(); */
	});
	$("#cancelbtn").on("click",function(event){
		$(location).attr("href","<c:url value='/index.mvc'/>");
	});
</script><!--이메일 선택-->
<script>
	$("#zipbtn").on("click",function(event){
		$("#ziplist *").remove();
		$("#zipcodemodal").modal('show');
	});
	$("#findbtn").on("click",function(event){
		var result = "<option>123-123 서울 광진구 자양동</option><option>123-123 서울 광진구 자양동</option><option>123-123 서울 광진구 자양동</option><option>123-123 서울 광진구 자양동</option><option>123-123 서울 광진구 자양동</option><option>123-123 서울 광진구 자양동</option><option>123-123 서울 광진구 자양동</option><option>123-123 서울 광진구 자양동</option><option>123-123 서울 광진구 자양동</option><option>123-123 서울 광진구 자양동</option>";	
		$("#ziplist *").remove();
		$(result).appendTo("#ziplist");
	});
	$("#sendbtn").on("click",function(event){
		var zip = $("#ziplist").val().split(" ");
		$("#zip1").val(zip[0].split("-")[0]);
		$("#zip2").val(zip[0].split("-")[1]);
		$("#addr").val(zip[1]+" "+zip[2]+" "+zip[3]);
		$("#zipcodemodal").modal('hide');
	});
</script><!--//-->
<script>
	$("#repwd").on("blur",function(event){
		if($("#pwd").val() == $("#repwd").val()){
			$("#msg2").html("비밀번호가 일치합니다").css("color","blue");
			$("#pwdcheck").val("y");
		}else {
			$("#msg2").html("비밀번호가 일치하지 않습니다.").css("color","red");
			$("#pwdcheck").val("n");
		}
	});
</script>
<script>
	$("#capbtn").on("click",function(event){
		var reqAjax =$.ajax({
			type:'GET',
			url:"<c:url value='/admin/checkcaptcha.mvc'/>",
			data:{mykey:$("#captcha").val()}
		});
		reqAjax.done(function(result){
			if(result == 'y'){
				alert('자동가입방지확인!');
				$("#chkcaptcha").val('yes');
			}else alert('확인실패!-문자를 다시 입력하세요');
		});
		reqAjax.fail(function(xhr,status,err){
			alert(status+"/"+err);
		});
		
	});

</script>






